<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <template #car="{ record }">
        <a-link @click="OpenCarInfo(record.car)">
          {{ record.car?.to }}
        </a-link>
      </template>
      <template #parcel_count="{ record }">
        {{ record.parcel_count }} / {{ record.tray_list_sum_count }}
      </template>
      <template #tray_list_count="{ record }">
        {{ record.tray_list_count }}
        <a-link @click="openList(record)"> 
            <template #icon>
              <icon-edit />
            </template>
        </a-link>
      </template>

      <template #beforeTable>
        <button-group :button-groups="buttonGroups" :crud-ref="crudRef" :selected="selected" :currentStatus="currentStatus"/>

      </template>
      <template #operationBeforeExtend="{ record }">
          <a-link @click="openParcelList(record)" type="primary" >查看货箱</a-link>
      </template>
    </ma-crud>
    <car-info ref="carInfo" />
    <data-list ref="datalist" />
    <parcels-list ref="parcelsList" />
    <batch-action-modal v-model="batch.visible"
    :crud-ref="crudRef"
    :selected="selected"
    ref="batchActionRef"
    ></batch-action-modal>
    
  </div>
</template>
<script setup>
import {computed, nextTick, provide, ref, watch,inject,reactive} from "vue";
import tray from '@/api/warehouse/tray'
import car from '@/api/warehouse/car'
import CarInfo from '@/views/warehouse/tray/components/carinfo.vue'
import { Message } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'
import BatchActionModal from "@cps/actions/batchActionModal.vue";
import { getDictData } from '@/utils/crud/dict'
import DataList from './components/dataList.vue'
import ParcelsList from './components/parcelsList.vue'
import ButtonGroup from "@cps/actions/buttonGroup.vue";
const crudRef = ref()
const carInfo = ref()
const record = inject('record')
const currentStatus = ref(1)
const batchActionRef = ref()
const batch = ref({visible:false,})
const selected = computed(()=>crudRef.value?.selecteds)
const datalist = ref()
const parcelsList = ref()
const openList = async (row) => {
    datalist.value.open(row)
  }
const openParcelList = async (row) => {
    parcelsList.value.open(row)
  }
const buttonGroups = [
  {'title':'删除',api:tray.deletes,hideStatus: ["2","3","4"],auth:['warehouse:tray:delete']},
  {'title':'装车',api:car.entrucking,hideStatus: ["2","3","4"],auth:['warehouse:car:entrucking'],
    form:{
      columns:[
        {title: '选择车辆', dataIndex: 'car_id',formType: 'select',dict:{
              url: 'warehouse/car/list',
              props: {label: 'key', value: 'value'},
              translation: true,
          },
        },
      ]
    }
  },
  {'title':'自提',api:tray.takeself,hideStatus: ["2","3","4"],auth:['warehouse:tray:takeself'],},
  {'title':'换车',api:car.entrucking,hideStatus: ["1","3","4"],auth:['warehouse:car:entrucking'],
    form:{
      columns:[
        {title: '选择车辆', dataIndex: 'car_id',formType: 'select',dict:{
              url: 'warehouse/car/list',
              props: {label: 'key', value: 'value'},
              translation: true,
          },
        },
      ]
    }
  },
  {'title':'回仓',api:tray.back,hideStatus: ["1","2","4"],auth:['warehouse:tray:back']},
  {'title':'结束',api:tray.over,hideStatus: ["1","2","4"],auth:['warehouse:tray:over']},
]
const OpenCarInfo = (car)=>{
    carInfo.value.open(car)
}

const options = reactive({
  id: 'tray',
  pageLayout: 'fixed',
  rowSelection: {
    showCheckedAll: true
  },
  tabs:{
    dataIndex: "status",
    onChange: (value) => {
      currentStatus.value = value
    }
  },
  beforeRequest: (params) => {
    params.delivery_id = record?.value.id
    return params
  },
  pk: 'id',
  operationColumn: true,
  operationColumnWidth: 160,
  formOption: {
    viewType: 'drawer',
    width: 600
  },
  api: tray.getList,
  recycleApi: tray.getRecycleList,
  add: {
    show: false,
    api: tray.save,
    auth: ['warehouse:tray:save']
  },
  edit: {
    show: false,
    api: tray.update,
    auth: ['warehouse:tray:update']
  },
  delete: {
    show: false,
    api: tray.deletes,
    auth: ['warehouse:tray:delete'],
    realApi: tray.realDeletes,
    realAuth: ['warehouse:tray:realDeletes']
  },
  recovery: {
    show: false,
    api: tray.recoverys,
    auth: ['warehouse:tray:recovery']
  }
})

const columns = reactive([
  {
    title: "主键",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入主键"
    }
  },
  {
    title: "状态",
    dataIndex: "status",
    dict: {
      name: "trayStatus",
      props: {
        label: "title",
        value: "key"
      },
      translation: true
      },
    formType: "select",
    search: true
  },
  {
    title: "目的地",
    dataIndex: "car",
    formType: "input",
    search: true
  },
  {
    title: "托盘编号",
    dataIndex: "number",
    formType: "input",
    search: true
  },
  {
    title: "类型",
    dataIndex: "type",
    formType: "select",
    dict: {
      name: "parcelSendType",
      props: {
        label: "title",
        value: "key"
      },
      translation: true
      },
    search: true
  },
  {
    title: "地址/用户",
    dataIndex: "address",
    formType: "input",
    search: true
  },
  {
    title: "承运商服务",
    dataIndex: "supplier_service_id",
    virtualListProps:{},
    dict: {
      url: 'logistics/supplier/list',
      props: {
          label: 'name',
          value: 'id'
      },
      translation: true
    },
    formType: "select",
    search: true
  },
  
  {
    title: "承运商代码",
    dataIndex: "supplier_service.code",
    formType: "input",
    search: true
  },

  {
    title: "箱子数量",
    dataIndex: "parcel_count",
    formType: "input",
  },
  {
    title: "托盘数量",
    dataIndex: "tray_list_count",
    formType: "input",
  },
  {
    title: "转运单",
    dataIndex: "delivery_id",
    formType: "input",
    hide: true
  },
  {
    title: "车id",
    dataIndex: "car_id",
    formType: "input",
    hide: true
  },

  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "更新者",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    showTime: true
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "删除时间",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "备注",
    dataIndex: "remark",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  }
])
provide('getDictData', getDictData)
provide('crudRef', crudRef)
</script>
<script> export default { name: 'warehouse:tray' } </script>